<template>
	<block>
		<view v-if="type == 'dot'" class="loader">
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="dot"></view>
			<view v-if="type !== 'small'" class="dot"></view>
			<view v-if="type !== 'small'" class="dot"></view>
		</view>

		<view v-else class="s-full-loading" :style="{ backgroundColor: backgroundColor }">
			<image class="s-full-loading-image" :src="image" ref="loadingLogos"></image>
			<text class="s-full-loading-text" :style="{ color: textColor }">{{ text }}</text>
		</view>
	</block>
</template>
<script>
export default {
	name: 'Loading',
	props: {
		image: {
			type: String,
			default: '/static/icons/pig.gif'
			// default: 'http://wimg.588ku.com/gif620/20/08/11/09b533b5576498aeba0074e61f3bfce4.gif'
		},
		text: {
			type: String,
			default: '加载中...'
		},
		textColor: {
			type: String,
			default: '#c2c2c2'
		},
		backgroundColor: {
			type: String,
			default: 'rgba(255, 255, 255, 0.1)'
		},
		type: {
			type: String,
			default: 'dot'
		}
	},
	methods: {}
};
</script>
<style scoped>
view {
	display: flex;
	flex-direction: column;
}
.s-full-loading {
	width: 750rpx;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	bottom: 0;
}
.s-full-loading-image {
	width: 320rpx;
	height: 320rpx;
	/* 	border-radius: 150rpx; */
}
.s-full-loading-text {
	line-height: 50rpx;
	font-size: 26rpx;
	margin-top: 10rpx;
	text-align: center;
}
</style>
